<template>
    <rx-dialog @handOk="okFun" @cancel="cancel" :showcancel="true" :showok="true">
        <rx-layout>
            <div slot="center">
                <div style="padding: 20px;">{{i18n('appImport.tableName','表名')}}：{{tableName}}</div>
                <a-table :columns="columns" :data-source="checkData" :pagination="false" id="chkTable"
                         :scroll="{y:355}"  ref="checkTable" :rowSelection="rowSelection" :rowKey="pk" >
                    <template v-for="item in columns" :slot="item.dataIndex" slot-scope="text, record, index">
                        <span v-if="record[item.dataIndex + '_OLD'] && record[item.dataIndex] != record[item.dataIndex + '_OLD']"
                              style="color: rgb(68,142,248);">
                            <a-tooltip placement="bottom">
                                <template #title><span style="color:  rgb(68,142,248);">{{i18n('appImport.oldData','旧数据')}}：{{record[item.dataIndex + '_OLD']}}</span></template>
                                {{text}}
                            </a-tooltip>
                        </span>
                        <span v-else>
                            <a-tooltip placement="bottom">
                                <template #title>{{text}}</template>
                                {{text}}
                            </a-tooltip>
                        </span>
                    </template>
                    <template slot="cover" slot-scope="text, record, index">
                        <span>{{index + 1}}/{{index + 1}}</span>
                    </template>
                </a-table>
                <div style="margin-top: 20px; padding-left: 30px;">
                    <a-checkbox :defaultChecked="selectChecked" @click="selectAll($event)" v-if="refreshCheck">
                        <span :title="i18n('appImport.ifSelected','选中则意味着将覆盖ID相同的记录')">{{i18n('appImport.selectAll','全选/全不选')}}</span>
                    </a-checkbox>
                </div>
            </div>
        </rx-layout>
    </rx-dialog>
</template>
<script>
import {BaseForm, RxDialog,  Util, RxMonacoEditor,RxSelect} from "@lowcode/jpaas-common-lib";
import SysAppApi from "@/api/system/core/sysApp";
export default {
    name: 'app-import',
    mixins: [BaseForm],
    components: {
        RxDialog,RxSelect,
        RxMonacoEditor
    },
    props: {
        layerid: String,
        lydata: Object,
        destroy: Function,
        tableName: {
            type: String
        },
        tableIndex: {
            type: Number
        },
        repeatData: {
            type: Array
        },
        type: {
            type: String
        },
        ids: {
            type: Array
        },
        columnData: {
            type: Array
        },
        callback: {
            type: Function
        }
    },
    data() {
        return {
            //检查返回信息
            selectedKeys:[],
            selectedRows:[],
            columns: [
                {
                title: this.i18n('form.sn','序号'),
                dataIndex: 'index',
                key: 'index',
                align: 'left',
                width: 50,
                customRender: (text, record, index) => `${index + 1}`,
            },

            ],
            checkData: [],
             // 外键
            pk: null,
            selectChecked: false,
            refreshCheck: true
        }
    },
    created() {
        this.checkData = this.repeatData;
        this.getColumn();
        this.setCheckData();
    },
    computed: {
        rowSelection() {
            return {
                //columnTitle:"ID相同的记录则覆盖",
                columnTitle:{
                    tag:'span',
                    text:this.i18n('appImport.check','勾选'),
                    data:{attrs:{title:this.i18n('appImport.ifSelected','选中则意味着将覆盖ID相同的记录')}}
                },
                columnWidth:80,
                onChange: (selectedRowKeys, selectedRows) => {
                    this.selectedKeys=selectedRowKeys;
                    this.setCheck(selectedRows.length);
                },
                selectedRowKeys:this.selectedKeys
            };
        },
        errMsg(){
            return this.getResult("errMsg");
        },
        alertSql(){
            //if(this.checkInfo)
            return this.getResult("alertSql");

        }
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"SysApp",key);
        },
        setCheck(length) {
            if (length != this.checkData.length) {
                this.selectChecked = false;
                this.refreshCheck = false;
                this.$nextTick(()=> {
                    this.refreshCheck = true;
                })
            }
        },
        setCheckData() {
            if (this.type === 'part') {
                this.selectedKeys = this.ids;
            } else {
                this.selectAll(null);
                this.selectChecked = true;
            }
        },
        // 表格字段信息
        getColumn() {
            let length = this.columnData.length;
            for (let i = 0; i < length; i++) {
                let column = this.columnData[i];
                let flag = this.removeCommonColumn(column);
                if (flag) {
                    this.columns.push({
                        title: column.comment,
                        dataIndex: column.fieldName,
                        key: column.fieldName,
                        align: 'left',
                        ellipsis: true ,
                        scopedSlots: {customRender: column.fieldName},
                    });
                }
            }
        },
        // 移除通用字段
        removeCommonColumn(column) {
            let commonColumn = ['COMPANY_ID_', 'TENANT_ID_', 'CREATE_DEP_ID_', 'CREATE_BY_', 'CREATE_TIME_', 'UPDATE_BY_', 'UPDATE_TIME_',
            'APP_ID_', 'DELETED_']
            let exist = commonColumn.includes(column.fieldName)
            if (!column.isPk && !exist) {
                return true;
            }
            if (column.isPk) {
                this.pk = column.fieldName
            }
            return false;
        },
        selectAll(event){
            let chk=true;
            if(event){
                chk=event.target.checked;
            }
            let rowKeys=[];
            if (chk){
                let data;
                for(data of this.checkData) {
                    rowKeys.push(data[this.pk]);
                }
            }
            this.selectedKeys=rowKeys;
        },
        okFun() {
            let data = {
                "tableIndex": this.tableIndex,
                "tableName": this.tableName,
                "overrides": this.selectedKeys,
                "overridesTotal": this.selectedKeys.length,
                "overridesType": this.selectedKeys.length == this.checkData.length ? 'all' : 'part'
            }
            Util.closeWindow(this, "ok", data);
        },
        cancel() {
            Util.closeWindow(this, "cancel", null);
        }
    }
}
</script>
<style scoped>
.title-div {
    padding: 10px 0;
    font-weight: bold;
    color: navy;
}

* >>> .ant-table-thead > tr > th {
    text-align: center;
}

* >>> .ql-snow .ql-picker-label::before {
    vertical-align: top;
}

* >>> .ql-snow .ql-color-picker .ql-picker-label svg,
* >>> .ql-snow .ql-icon-picker .ql-picker-label svg {
    vertical-align: top;
}

.avatar-uploader > .ant-upload {
    width: 128px;
    height: 128px;
}

.ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
}
</style>